import React from 'react'
import styles from './GifInfo.css'
import { Modal } from 'antd'
import GifTags from './GifTags.js'
import R from 'ramda'
import universalFetch, { handleFetchError } from 'store/modules/fetch'

type Props = {
   data: Object,
   removeGifInfoModal: Function,
   goToCondition: Function
}

type State = {
  OverViewData: Array<Object>,
  ViewDataDynamic: Array<Object>,
  overShow: boolean,
  mainHeight: string
}

class GidInfo extends React.Component {
  props: Props
  state: State
  interval: number
  getOverViewData: Function
  hideModal: Function
  closeToConditin: Function
  constructor (props: Props) {
    super(props)
    this.state = {
      OverViewData: [],
      ViewDataDynamic: [],
      overShow: true,
      mainHeight: ''
    }
    this.getOverViewData = this.getOverViewData.bind(this)
    this.hideModal = this.hideModal.bind(this)
    this.closeToConditin = this.closeToConditin.bind(this)
  }

  componentWillMount () {
    clearInterval(this.interval)
    this.getOverViewData(this.props)
    const component = this
    clearInterval(this.interval)
    this.interval = setInterval(function () {
      component.getOverViewData(component.props)
    }, 5000)
  }

  componentWillReceiveProps (nextProps) {
    if (!R.equals(nextProps, this.props)) {
      clearInterval(this.interval)
      this.getOverViewData(nextProps)
      const component = this
      clearInterval(this.interval)
      this.interval = setInterval(function () {
        component.getOverViewData(nextProps)
      }, 5000)
    }
  }

  componentWillUnmount () {
    clearInterval(this.interval)
  }

  getOverViewData (props) {
    const { data } = props
    const mainHeight = document.body.clientHeight - 130 // 弹出层的高度
    universalFetch(`${__SERVICE_API__}device/devices/${data.id}/overviewTest`)
      .then((res) => res.json())
      .then((json) => {
        if (json.code !== 200000) {
          throw new Error(JSON.stringify({ code: json.code, message: json.message }))
        }
        const ret = json.result.map((d, i) => {
          d['top'] = d.y
          d['left'] = d.x
          // if (d.variable === 'value') {
          //   d['unit'] = 'mm'
          // } else if (d.variable === 'speed') {
          //   d['unit'] = 'rpm'
          // } else {
          //   d['unit'] = 'μm'
          // }
          return d
        })
        this.setState({
          mainHeight: mainHeight,
          OverViewData: ret,
          ViewDataDynamic: json.result.map((d, i) => {
            let ob = {}
            ob['data'] = data
            ob['mes'] = ret[i]
            // ob['value'] = 0
            return ob
          })
        })
      })
      .catch((error) => {
        handleFetchError(error)
        console.error(error)
      })
  }

  hideModal () {
    clearInterval(this.interval)
    this.setState({
      overShow: false
    })
    this.props.removeGifInfoModal()
  }

  closeToConditin (data) {
    this.hideModal()
    this.props.goToCondition(data)
  }

  render () {
    const { data } = this.props
    const title = '总貌图（' + data.customerName + ' / ' + data.name + '）'
    const { ViewDataDynamic, mainHeight } = this.state
    return (
      <Modal
        title={title}
        width={'96%'}
        style={{ top: 20 }}
        visible={this.state.overShow}
        onCancel={this.hideModal}
        footer={null}
      >
        <div className={styles['main']} style={{ height: mainHeight }}>
          <div className={styles['infoImgCon']}>
            {
              ViewDataDynamic.map((d, i) => {
                return <GifTags key={i} data={d} goToCondition={this.closeToConditin} />
              })
            }
            <img src={data.overviewUrl} className={styles['infoImg']} />
          </div>
        </div>
      </Modal>
    )
  }
}
export default GidInfo
